<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mask {
            display: none;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            /* text-align: center; */
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-color:后面的值 默认是当成普通的字符串处理的 -->
        <!-- <div :style="{width:'300px',height:'300px',backgroundColor:'red'}" v-color:font="color">
            hello
        </div> -->

        <button @click="flag=!flag">点击</button>


        <!-- v-color:后的[]中内容当成表达式进行解析 -->
        <div :style="{width:'300px',height:'300px',backgroundColor:'red'}" v-color:[type]="color">
            hello
        </div>

    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 注册全局的自定义指令 v-color
        Vue.directive("color", {
            inserted(el, binding) {
                console.log(binding.value);
                console.log(binding);

                const {arg,value} = binding;

                if (arg === "font") {
                    el.style.color = value

                } else if (arg === "background") {
                    el.style.backgroundColor = value

                }

            },
            update(el, binding){
                const {arg,value} = binding;
                if (arg === "font") {
                    el.style.color = value

                } else if (arg === "background") {
                    el.style.backgroundColor = value

                }
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                msg: "",
                flag: false,
                color: "blue",
                type: "font",
            },
            methods: {
                aaa() {
                    this.$destroy();
                }
            },
            watch: {
                flag(val) {
                    if (val) {
                        this.type = "background";
                    } else {
                        this.type = "font"
                    }
                }
            }
        })
    </script>
</body>

</html>